<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>SEBIA数据上报</title>
	</head>
	<style type="text/css">
		html {
			color: #606266;
			font-size: 1.5vh;
		}

		.top-title {
			display: flex;
			align-items: center;
			margin-bottom: 10px;
			color: #333333;
		}

		input {
			font-size: .85rem !important;
			border-radius: 4px;
			border: 1px solid #e6ebf5;
			background-color: #fff;
			overflow: hidden;
			height: 25px;
			color: #303133;
			-webkit-transition: 0.3s;
			transition: 0.3s;
			margin-left: 5px;
		}

		.form {
			display: flex;
			align-items: center;
		}

		.buttom-box {
			margin-left: 20px;
			display: flex;
		}

		.buttom {
			margin: 0 12px;
			color: #fff;
			background-color: #518BFB;
			border-color: #1890ff;
			padding: 0 25px;
			display: flex;
			height: 3vh;
			align-items: center;
			justify-content: center;
			cursor: pointer;
		}

		.table-box {
			width: 100%;
			overflow: auto;
		}

		table {
			width: 100%;
		}

		.header {
			background-color: #333333;
			color: #fff;
			padding: 12px 0;
			height: 4vh;
			;
		}

		td {
			text-align: center;
		}

		.table tr:nth-child(odd) {
			background: #eaeaea;
		}
	</style>
	<body>
		<div id="app">
			<div class="top-title">
				<div style="margin-right:2.5vw">
					SEBIA数据上报（版本：1.1）
				</div>
				<div class="form">
					日期:
					<input type="date" name="date" v-model="date">
					<input type="hidden" name="action">
					<div class="buttom-box">
						<input type="submit" value="查询" class="buttom" @click="queryList">
						<input type="submit" value="上报" class="buttom" @click="sendList">
						
					</div>
				</div>
			</div>
			<div class="table-box">
				<table>
					<thead>
						<tr class="header">
							<th v-for="(item,key,index) in listData[0]" :key="index" v-if="key != 'curva'">
								{{
										key=='nomeFirst'?'nome_1':
										key=='nomeSecond'?'nome_2':
										key=='nomeThird'?'nome_3':
										key=='nomeFourth'?'nome_4':
										key=='nomeFifth'?'nome_5':
										key=='nomeSixth'?'nome_6':
										key=='nomeSeventh'?'nome_7':
										key=='nomeEighth'?'nome_8':
										key=='nomeNinth'?'nome_9':
										key=='valPiccoFirst'?'val_1':
										key=='valPiccoSecond'?'val_2':
										key=='valPiccoThird'?'val_3':
										key=='valPiccoFourth'?'val_4':
										key=='valPiccoFifth'?'val_5':
										key=='valPiccoSixth'?'val_6':
										key=='valPiccoSeventh'?'val_7':
										key=='valPiccoEighth'?'val_8':
										key=='valPiccoNinth'?'val_9':key
									}}
							</th>
						</tr>
					</thead>
					<tbody class="table">
						<tr v-for="(item,key,index) in listData" :key="index">
							<td>{{item.dataAnalisi}}</td>
							<td>{{item.programma}}</td>
							<td>{{item.seq}}</td>
							<td>{{item.nominativo}}</td>
							<td>{{item.barcodeSegment}}</td>
							<td>{{item.uid}}</td>
							<td>{{item.nomeFirst}}</td>
							<td>{{item.nomeSecond}}</td>
							<td>{{item.nomeThird}}</td>
							<td>{{item.nomeFourth}}</td>
							<td>{{item.nomeFifth}}</td>
							<td>{{item.nomeSixth}}</td>
							<td>{{item.nomeSeventh}}</td>
							<td>{{item.nomeEighth}}</td>
							<td>{{item.nomeNinth}}</td>
							<td>{{item.valPiccoFirst}}</td>
							<td>{{item.valPiccoSecond}}</td>
							<td>{{item.valPiccoThird}}</td>
							<td>{{item.valPiccoFourth}}</td>
							<td>{{item.valPiccoFifth}}</td>
							<td>{{item.valPiccoSixth}}</td>
							<td>{{item.valPiccoSeventh}}</td>
							<td>{{item.valPiccoEighth}}</td>
							<td>{{item.valPiccoNinth}}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data() {
				return {
					date: new Date().getFullYear().toString() + '-' +
						((new Date().getMonth() + 1).toString() < 10 ?
							"0" + (new Date().getMonth() + 1).toString() :
							(new Date().getMonth() + 1).toString()) + '-' +
						(new Date().getDate().toString() < 10 ?
							"0" + new Date().getDate().toString() :
							new Date().getDate().toString()),
					listData: []
				}
			},
			created() {},
			methods: {
				queryList() {
					console.log(this.date);
					// ajax请求
					axios.get(`/findByDate?date=` + this.date).then(function(res) {
						console.log(res);
						this.listData = res.data
					}).catch(function(error) {
						console.log(error);
					});
				},
				sendList() {
					console.log(this.date);
					// ajax请求
					axios.get(`/send?date=` + this.date).then(function(res) {
						console.log(res);
						this.listData = res.data
					}).catch(function(error) {
						console.log(error);
					});
				},
			}
		})
	</script>
</html>
